<template>
	<view>
		<view :style="{ height: ptop + 'px' }"></view>
		<view class="seletShop">
			<text class="iconfont icon-scan" @tap="saoma"></text>
			<view>
				<text class="shopName" @tap="toPage" data-url="selectShop">{{ selectShop.name ? selectShop.name : '未选择店铺' }}</text>
				<text class="iconfont icon-unfold" @tap="toPage" data-url="selectShop"></text>
			</view>
			<text class="iconfont icon-zhongyaotongzhi" @tap="toPage" data-url="noticeList" data-type="1"></text>
		</view>
		<view class="shopDataBox ">
			<view class="item " :class="[this.showType ? 'active' : '']" @tap="toggleShowType(1)">
				<text class="iconfont icon-mendianshenhe"></text>
				<text>门店首页</text>
			</view>
			<view class="item " :class="[this.showType ? '' : 'active']" @tap="toggleShowType(0)">
				<text class="iconfont icon-diannao"></text>
				<text>老师工作台</text>
			</view>
			<!-- <view class="dataItem tapOpt" @tap="toOrderList" data-status="1" data-url="orderList" >
				<text>{{orderCount[10]?orderCount[10]:0}}</text>
				<text>待付款</text>
			</view>
			<view class="dataItem tapOpt" @tap="toOrderList" data-status="4" data-url="orderList" >
				<text>{{orderCount[41]?orderCount[41]:0}}</text>
				<text>待体验</text>
			</view>
			<view class="dataItem tapOpt" @tap="toOrderList" data-status="5" data-url="orderList" >
				<text>{{orderCount[4]?orderCount[4]:0}}</text>
				<text>待开课</text>
			</view>
			<view class="dataItem tapOpt" @tap="toOrderList" data-status="6" data-url="orderList" >
				<text>{{orderCount[11]?orderCount[11]:0}}</text>
				<text>退款售后</text>
			</view> -->
		</view>
		<view class="indexCnt">
			<!-- 快捷入口 首页-->
			<view class="quickBtnBox" v-if="showType">
				<view class="btnBox tapOpt" @tap="toOrderList" data-url="orderList">
					<image src="../../static/order.png"></image>
					<text>订单管理</text>
				</view>
				<view class="btnBox tapOpt" @tap="toKaoqing" data-url="classTable">
					<image src="../../static/checkwork.png"></image>
					<text>门店课表</text>
				</view>
				<view class="btnBox tapOpt" @tap="toZiChan" data-url="assetCenter">
					<image src="../../static/finance.png"></image>
					<text>资产中心</text>
				</view>
			</view>
			<!--快捷入口 工作台 -->
			<view class="quickBtnBox" v-if="!showType">
				<view class="btnBox tapOpt" @tap="toKaoqing" data-url="rollCall">
					<text class="iconfont icon-_bianji orange"></text>
					<text>点名</text>
				</view>
				<view class="btnBox tapOpt" @tap="toPage" data-url="leaveList">
					<text class="iconfont icon-_geren qing"></text>
					<text>请假学员</text>
				</view>
				<view class="btnBox tapOpt" @tap="toMyTable" >
					<text class="iconfont icon-_rili purple"></text>
					<text>我的课表</text>
				</view>
			</view>

			<!-- 今日门店统计 首页-->
			<view class="shopTongji" v-if="showType">
				<view class="tjTitle">今日门店统计</view>
				<view class="tjRow">
					<view class="tjItem">
						<text>{{ tongji.planCnt }}</text>
						<text>今日排课</text>
					</view>
					<view class="tjItem">
						<text>{{ tongji.stuCnt }}</text>
						<text>登记新生</text>
					</view>
					<view class="tjItem">
						<text>{{ tongji.orderCnt }}</text>
						<text>今日报课</text>
					</view>
				</view>
			</view>
			<!-- 本月上课情况 工作台-->
			<view class="shopTongji" v-if="!showType">
				<view class="tjTitle">本月上课情况</view>
				<view class="tjRow monthRow">
					<view class="monthItem">
						<text>日常课</text>
						<view class="infoItem">
							<text>{{teacherInfo.commonCnt}}</text>
							<text class="unit">次</text>
						</view>
					</view>
					<view class="monthItem">
						<text>补课</text>
						<view class="infoItem">
							<text>{{teacherInfo.reverCnt}}</text>
							<text class="unit">次</text>
						</view>
					</view>
					<!-- <view class="monthItem">
						<text>正常出勤</text>
						<view class="infoItem">
							<text>112</text>
							<text class="unit">次</text>
						</view>
					</view>
					<view class="monthItem">
						<text>出勤率</text>
						<view class="infoItem">
							<text>82.46</text>
							<text class="unit">%</text>
						</view>
					</view> -->
				</view>
			</view>
			<!-- 门店总计 首页-->
			<view class="mendianTongji" v-if="showType">
				<view class="tjTitle">门店总计</view>
				<view class="tjRow">
					<view class="tjItem">
						<text>{{ tongji.memberCnt }}</text>
						<text>学员</text>
					</view>
					<view class="tjItem">
						<text>{{ tongji.teacherCnt }}</text>
						<text>师资</text>
					</view>
					<view class="tjItem">
						<text>{{ tongji.courseCnt }}</text>
						<text>课程</text>
					</view>
				</view>
			</view>

			<!-- 经营数据 -->
			<!-- <view class="managementData">
				<view class="magtTitle">
					<text class="iconfont icon-shuju"></text>
					<text>找培训经营数据</text>
				</view>
				<view class="magtDataTab">
					<text class="tapBg" :class="[dataType==1?'active':'']" data-type="1" @tap="toggleShowData">今天</text>
					<text class="tapBg" :class="[dataType==2?'active':'']" data-type="2" @tap="toggleShowData">昨天</text>
					<text class="tapBg" :class="[dataType==3?'active':'']" data-type="3" @tap="toggleShowData">七天</text>
				</view>
				<view class="magtDataCnt">
					<view class="dataCnt">
						<view class="dataItem">
							<text>{{manageData.userCount?manageData.userCount:0}}</text>
							<text>访客人数</text>
						</view>
						<view class="dataItem">
							<text>{{manageData.askCount?manageData.askCount:0}}</text>
							<text>咨询人数</text>
						</view>
						<view class="dataItem">
							<text>{{manageData.orderCount?manageData.orderCount:0}}</text>
							<text>支付订单数</text>
						</view>
						<view class="dataItem">
							<text>{{manageData.orderAmount?manageData.orderAmount:0}}</text>
							<text>支付金额</text>
						</view>
					</view>
					
				</view>
			</view> -->
			<!-- 今日上课 工作台 -->
			<view class="todayClass" v-if="!showType">
				<view class="ttle">今日上课班级</view>
				<view class="classList" v-if="classList.length">
					<view class="classRow" v-for="(item, index) in classList" :key="index">
						<view class="timeAndStatus">
							<text class="time">{{ item.classTime }}</text>
							<text class="status">{{ statusArr[index] ? '已上课' : '未上课' }}</text>
						</view>
						<text class="className">{{ item.className }}</text>
						<text class="goodName">{{ item.courseName }}</text>
						<text class="teacherName">{{ item.teacherName }}</text>
					</view>
				</view>
				<emptyBox v-if="!classList.length"></emptyBox>
			</view>
		</view>
		<updateModal ref="upModal"></updateModal>
		<downLoding></downLoding>
	</view>
</template>

<script>
import COMM from '@/common/common.js';
import API from '@/common/api.js';
import TL from '../../common/tool.js';
import { mapState } from 'vuex';
import downLoding from '@/components/downLoding/downLoding.vue';
import updateModal from '@/components/updateModal/updateModal.vue';
import emptyBox from "../../components/emptyBox/emptyBox.vue";
export default {
	components: {
		downLoding,
		updateModal,
		emptyBox
	},
	data() {
		return {
			tongji: [],
			prs: 0,
			isShow: false,
			ptop: uni.getSystemInfoSync().statusBarHeight + uni.upx2px(90),
			showType: 1, //1门店首页    0老师工作台
			classList: [],
			statusArr: [],
			tongji: {},
			teacherInfo:{},
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			settledProgress: state => state.settled.settledProgress,
			selectShop: state => state.shop.selectShop,
			manageData: state => state.shop.manageData,
			dataType: state => state.shop.dataType,
			orderCount: state => state.order.orderCount,
			timLogin: state => state.tim.isLogin,
			timUserInfo: state => state.tim.timUserInfo
		})
	},
	watch: {
		selectShop(_newShop) {
			if (_newShop.id) {
				this.getData();
				this.getToingji();
				this.getTeacherCount();
				if (this.userInfo.admin == 1 || this.userInfo.roles.join(',').indexOf('3') > -1) {
					this.TIMLogin();
				}
			}
		},
		classList(newList) {
			if (newList.length) {
				this.getRollStatus();
			}
		}
	},
	methods: {
		toMyTable(){
			uni.showToast({
				title: '敬请期待',
				icon: 'none'
			});
		},
		toggleShowType(e) {
			this.showType = parseInt(e);
		},
		toggleShowData(e) {
			if (this.selectShop.id) {
				this.$store.dispatch('getManageData', {
					type: parseInt(e.currentTarget.dataset.type),
					storeId: this.selectShop.id
				});
			} else {
				this.toPage({
					url: 'selectShop'
				});
			}
		},
		getData() {
			this.$store.dispatch('getManageData', {
				type: this.dataType,
				storeId: this.selectShop.id
			});
			this.$store.dispatch('getOrderCountBySid', this.selectShop.id);
		},
		toZiChan(e) {
			if (this.userInfo.roles.join(',').indexOf('2') > -1 || this.userInfo.admin == 1) {
				this.toPage(e);
			} else {
				uni.showToast({
					title: '无相关权限',
					icon: 'none'
				});
			}
		},
		toOrderList(e) {
			if (this.userInfo.roles.join(',').indexOf('2') > -1 || this.userInfo.roles.join(',').indexOf('3') > -1 || this.userInfo.admin == 1) {
				this.toPage(e);
			} else {
				uni.showToast({
					title: '无相关权限',
					icon: 'none'
				});
			}
		},
		toKaoqing(e) {
			if (this.userInfo.roles.join(',').indexOf('4') > -1 || this.userInfo.admin == 1) {
				this.toPage(e);
			} else {
				uni.showToast({
					title: '无相关权限',
					icon: 'none'
				});
			}
		},
		TIMLogin() {
			if (this.timLogin == '') {
				//未登录
				let _imid = this.selectShop.imid ? this.selectShop.imid : this.userInfo.imid;
				this.$store.dispatch('timLogin', _imid).then(() => {
					setTimeout(() => {
						this.$store.dispatch('timEditInfo', {
							nick: this.selectShop.name,
							avatar: this.selectShop.logo ? this.selectShop.logo : '',
							role: 1,
							// #ifndef H5
							profileCustomField: [
								{
									key: 'Tag_Profile_Custom_sid',
									value: this.selectShop.id.toString()
								}
							]
							// #endif
						});
					}, 1000);
				});
			} else {
				//已登录
				if (this.selectShop.id) {
					//店铺有IMID
					if (this.selectShop.imid != this.timLogin) {
						//与之前登录的IM不同
						this.$store.dispatch('timLogOut').then(() => {
							setTimeout(() => {
								this.$store.dispatch('timLogin', this.selectShop.imid).then(() => {
									setTimeout(() => {
										this.$store.dispatch('timEditInfo', {
											nick: this.selectShop.name,
											avatar: this.selectShop.logo ? this.selectShop.logo : '',
											role: 1,
											// #ifndef H5
											profileCustomField: [
												{
													key: 'Tag_Profile_Custom_sid',
													value: this.selectShop.id.toString()
												}
											]
											// #endif
										});
									}, 1000);
								});
							}, 1000);
						});
					} else {
					}
				} else {
					//没有IMID
				}
			}
		},
		saoma() {
			if (this.userInfo.roles.join(',').indexOf('2') > -1 || this.userInfo.roles.join(',').indexOf('3') > -1 || this.userInfo.admin == 1) {
				COMM.scanCode().then(res => {
					API.validCode({
						storeId: this.selectShop.id,
						code: res.result
					}).then(wfRes => {
						if (wfRes.data.code == 1) {
							uni.showToast({
								title: '核销成功',
								icon: 'none'
							});
							this.getData();
						} else {
							uni.showToast({
								title: '核销失败，' + wfRes.data.msg,
								icon: 'none'
							});
							setTimeout(() => {
								this.toPage({
									url: 'writeOff',
									scanType: res.scanType,
									scanCode: res.result
								});
							}, 1500);
						}
					});
				});
			} else {
				uni.showToast({
					title: '无相关权限',
					icon: 'none'
				});
			}
		},
		getRollStatus() {
			let _str = TL.datePattern(new Date(), 'yyyy-MM-dd');
			this.statusArr = [];
			API.apiGetGetRollCallStatus({
				begin: _str
			}).then(res => {
				if (res.data.code == 1) {
					let _arr = new Array(this.classList.length);

					this.classList.forEach((x, i) => {
						if (res.data.data.length > 0) {
							res.data.data.forEach((m, n) => {
								if (m.begin == x.begin && m.end == x.end && m.class_id == x.classId && m.timetableId == x.id) {
									_arr[i] = m.batch_id;
									return false;
								}
							});
						} else {
							_arr[i] = '';
						}
					});
					this.statusArr = _arr;
				}
			});
		},
		getToingji() {
			this.$store
				.dispatch('apiGetTongjiInfo', {
					storeId: this.selectShop.id
				})
				.then(res => {
					this.tongji = res.data.data;
				});
		},
		getTeacherCount(){
			API.apiGetTeacherCount({
				teacherId:this.userInfo.userId
			}).then(res=>{
				console.log(res);
				this.teacherInfo=res.data.data
			})
		}
	},
	onShow() {},
	onLoad() {
		
		this.showType = this.userInfo.roleListToString == '4,' ? 0 : 1;
		if (this.selectShop.id) {
			this.getData();
			if (this.userInfo.admin == 1 || this.userInfo.roles.join(',').indexOf('3') > -1) {
				this.TIMLogin();
			}
		}
		this.getToingji();
		this.getTeacherCount();
		this.$store
			.dispatch('getTodayClassList', {
				teacherId: this.userInfo.userId.toString(),
				weekNum: 0
			})
			.then(res => {
				this.classList = res;
			});
		uni.$on('refreshIndex', () => {
			this.getData();
		});
		
		uni.$on('downErr', res => {
			setTimeout(() => {
				this.isShow = false;
				uni.showModal({
					title: '更新失败',
					content: '安装包下载失败，请检查网络或重启应用试试',
					showCancel: false,
					cancelText: '',
					confirmText: '确定',
					success: res => {},
					fail: () => {},
					complete: () => {
						plus.runtime.quit();
					}
				});
			}, 500);
		});
		uni.$on('setPrs', res => {
			if (res.progress < 100) {
				this.isShow = true;
				this.prs = res.progress;
			} else {
				this.isShow = false;
				this.prs = res.progress;
			}
		});
	},
	// 下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			this.getData();
			this.getToingji();
			this.getTeacherCount();
			uni.stopPullDownRefresh();
		}, 1500);
	}
};
</script>

<style lang="less">
page {
	background-color: #f6f6f6;
}

.seletShop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 90upx;
	padding: 0;
	padding-top: var(--status-bar-height);
	display: flex;
	background-color: #ffcf27;
	line-height: 90upx;
	justify-content: space-between;
	box-sizing: content-box;
	align-items: center;
	z-index: 999;
	.shopName {
		font-size: 32rpx;
		font-weight: bold;
		color: #222433;
	}

	> .iconfont {
		// font-weight: bold;
		font-size: 50upx !important;
		margin: 0 28upx;
	}
}

.shopDataBox {
	display: flex;
	background-image: url(../../static/indexBg.png);
	background-size: 100% 100%;
	justify-content: space-around;
	padding: 50upx 28upx 100upx 28upx;
	.item {
		display: flex;
		align-items: center;
		font-size: 36upx;
		border-bottom: 4upx solid rgba(0, 0, 0, 0);
		padding-bottom: 10upx;
		.iconfont {
			font-size: 48upx;
			margin-right: 8upx;
		}
	}
	.active {
		border-bottom: 4upx solid #000000;
	}
	.dataItem {
		display: flex;
		flex-direction: column;
		align-items: center;

		> text:first-child {
			font-size: 48rpx;
			font-weight: bold;
			color: #222433;
		}

		> text:last-child {
			font-size: 32rpx;
			font-weight: bold;
			color: #222433;
			margin-top: 16upx;
		}
	}
}

.indexCnt {
	padding: 0 28upx;
	margin-top: -44upx;
}

.quickBtnBox {
	display: flex;
	justify-content: space-around;
	padding: 45upx 0 33upx 0;
	background-color: #ffffff;
	box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
	border-radius: 20upx;

	.btnBox {
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 96upx;
			height: 96upx;
		}
		.iconfont {
			width: 96upx;
			height: 96upx;
			border-radius: 50%;
			line-height: 96upx;
			text-align: center;
			color: #ffffff;
			font-size: 60upx;
			margin-top: 0;
		}
		.orange {
			background-color: #fe9322;
		}
		.purple {
			background-color: #bf8ce9;
		}
		.qing {
			background-color: #1fa9ca;
		}
		text {
			margin-top: 18upx;
			font-size: 28rpx;
			color: #3b434d;
		}
	}
}

.managementData {
	background-color: #8e8cad;
	box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
	border-radius: 14rpx;
	margin-top: 30upx;
	padding: 39upx 4upx 4upx 4upx;

	.magtTitle {
		display: flex;
		align-items: center;
		padding-left: 30upx;
		color: #ffffff;

		text {
			font-size: 36rpx;
		}

		.iconfont {
			font-size: 48upx;
			margin-right: 6upx;
		}
	}

	.magtDataTab {
		margin-top: 36upx;
		padding-left: 30upx;
		color: #ffffff;

		text {
			font-size: 32rpx;
			font-weight: bold;
			color: #ffffff;
			margin-right: 72upx;
			padding-bottom: 6upx;
			border-bottom: 4upx solid rgba(0, 0, 0, 0);
		}

		.active {
			border-bottom: 4upx solid #ffffff;
		}
	}

	.magtDataCnt {
		margin-top: 24upx;

		.dataCnt {
			background-color: #ffffff;
			border-radius: 14rpx;
			padding: 70upx 0 23upx 0;
			display: flex;
			flex-wrap: wrap;

			.dataItem {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 67upx;

				text:first-child {
					font-size: 68rpx;
					font-weight: bold;
					color: #676a80;
				}

				text:last-child {
					font-size: 28rpx;
					font-weight: bold;
					color: #828495;
				}
			}
		}
	}
}
.shopTongji {
	background-color: #8e8cad;
	box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
	border-radius: 14rpx;
	display: flex;
	flex-direction: column;
	margin-top: 20upx;
	.tjTitle {
		font-size: 32upx;
		color: #ffffff;
		padding: 10upx 20upx;
	}
	.tjRow {
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
		padding: 50upx 30upx;
		border: 1px solid #8e8cad;
		width: 100%;
		border-bottom-left-radius: 14rpx;
		border-bottom-right-radius: 14rpx;
		.tjItem {
			display: flex;
			flex-direction: column;
			align-items: center;

			> text:first-child {
				font-size: 56rpx;
				font-weight: bold;
				color: #676a80;
			}

			> text:last-child {
				font-size: 32rpx;
				// font-weight: bold;
				color: #676a80;
				margin-top: 16upx;
			}
		}
	}
	.monthRow {
		padding: 30upx 12upx;
		.monthItem {
			display: flex;
			flex-direction: column;
			align-items: center;
			> text {
				font-size: 28upx;
				color: #828495;
				margin-bottom: 20upx;
			}
			.infoItem {
				display: flex;
				align-items: baseline;
				> text {
					color: #676a80;
					font-weight: bold;
					font-size: 56upx;
				}
				.unit {
					font-size: 28upx;
					color: #828495;
					font-weight: normal;
				}
			}
		}
	}
}
.mendianTongji {
	background-color: #ffffff;
	background-image: url(../../static/tongjiBg.png);
	background-repeat: no-repeat;
	background-size: 200upx auto;
	background-position: right top;
	box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
	border-radius: 14rpx;
	display: flex;
	flex-direction: column;
	margin-top: 20upx;
	.tjTitle {
		font-size: 32upx;
		color: #202932;
		padding-top: 20upx;
		padding-left: 20upx;
		font-weight: bold;
	}
	.tjRow {
		display: flex;
		justify-content: space-around;
		padding: 40upx 30upx;
		width: 100%;
		border-bottom-left-radius: 14rpx;
		border-bottom-right-radius: 14rpx;
		.tjItem {
			display: flex;
			flex-direction: column;
			align-items: center;

			> text:first-child {
				font-size: 56rpx;
				font-weight: bold;
				color: #676a80;
			}

			> text:last-child {
				font-size: 32rpx;
				// font-weight: bold;
				color: #676a80;
				margin-top: 16upx;
			}
		}
	}
}
.todayClass {
	margin: 20upx 0;
	display: flex;
	flex-direction: column;
	.ttle {
		font-size: 36upx;
		padding-left: 20upx;
	}
	.classList {
		display: flex;
		flex-direction: column;
		margin-top: 20upx;
		.classRow {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			border-radius: 12upx;
			padding: 20upx 20upx 20upx 40upx;
			margin-bottom: 20upx;
			.timeAndStatus {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 16upx;
				.time {
					font-size: 36upx;
					color: #202932;
				}
				.status {
					height: 40upx;
					line-height: 40upx;
					color: #ffffff;
					background-color: #ffc01f;
					font-size: 24upx;
					padding: 0 16upx;
					border-radius: 20upx;
				}
			}
			.className,
			.goodName,
			.teacherName {
				font-size: 28upx;
				color: #9c9c9c;
				margin-bottom: 6upx;
			}
		}
	}
}
</style>
